<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Luxury Wallpaper</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
<link rel="stylesheet" href="mobile.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.masonry.js"></script>
<link  href="http://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet" type="text/css" >
<style>
h1 {
  font-family: 'Raleway';
  font-style: normal;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 1px;
  word-spacing: 0em;
  font-size:23px;
  text-align: center
}
</style>
<script>
	var $list;
	
	$(document).ready(function() {
		
		json_url = "http://picasaweb.google.com/data/feed/api/user/snluxurywallpaper@gmail.com?alt=jsonc&max-results=100";
		More();
	});
	

	
	function More()
	{
		var response = "";
		
		$list = $("#container");

		$.getJSON(json_url + "&start-index=1", function(data)
		{
			$.each(data.data.items, function(i, item) 
			{
				response += '<div class="box photo col1">';
				response += '<a href="sub.html#' + item.id + '@' + item.title + '" class="bwWrapper"><img src="' + item.media.image.url + '" alt="' + item.title + '"></a>';
				response += '</div>';
    		});
    		
			$(response).appendTo($list);

		})
		.complete(function() 
		{
			$list.imagesLoaded( function()
			{
      			$list.masonry({
        			itemSelector : '.box'
      			});
    		});
		});
	}
	

</script>
</head>
<body>
	<div class="wrap">
		<header>
		  <h1>Luxury Wallpaper</h1>
		</header>
		<div id="container" class="clearfix"></div> <!-- #container -->
	</div>
</body>
</html>
